<template>
  <el-drawer :title="titleMap[mode]" v-model="visible" size="50%" destroy-on-close @closed="emit('closed')">
    <el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="formRef" label-width="150px"
             label-position="left" style="margin: 20px;">
      <el-form-item label="唯一标识" prop="uuid" v-if="mode==='show'">
        <el-input v-model="form.uuid" clearable></el-input>
      </el-form-item>
      <el-form-item label="创建时间" prop="createdAt" v-if="mode==='show'">
        <el-input v-model="form.createdAt" clearable></el-input>
      </el-form-item>
      <el-form-item label="任务名称" prop="taskName">
        <el-input v-model="form.taskName" placeholder="请输入任务名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="任务cron" prop="taskCron">
        <SailorCron v-model="form.taskCron" placeholder="请输入任务cron表达式，右侧下拉选择"/>
      </el-form-item>
      <el-form-item label="任务类型" prop="taskTag">
        <el-select v-model="form.taskTag" placeholder="请选择任务类型">
          <el-option label="http调用" value="httpTask"></el-option>
          <el-option label="内部方法" value="internalFuncTask"></el-option>
          <el-option label="shell命令" value="shellTask"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="调用目标" prop="taskInvokeTarget">
        <el-input v-model="form.taskInvokeTarget"
                  placeholder="如果任务为http调用，则填写URL，如果是内部函数，则填写任务标识" clearable></el-input>
      </el-form-item>
      <el-form-item label="HTTP请求方式" prop="taskHttpMethod" v-if="form.taskTag === 'httpTask'">
        <el-select v-model="form.taskHttpMethod" placeholder="请选择HTTP请求方式">
          <el-option label="GET" value="GET"></el-option>
          <el-option label="POST" value="POST"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务参数">
        <el-input v-model="form.taskArgs" placeholder="请输入任务参数" clearable></el-input>
      </el-form-item>
      <el-form-item label="超时时间(秒)" prop="taskTimeout">
        <el-input-number v-model="form.taskTimeout" :min="0"
                         style="width: 100%;"></el-input-number>
      </el-form-item>
      <el-form-item label="任务重试间隔时间" prop="taskRetryInterval">
        <el-input-number v-model="form.taskRetryInterval" :min="0"
                         style="width: 100%;"></el-input-number>
      </el-form-item>
      <el-form-item label="任务重试次数" prop="taskRetryTimes">
        <el-input-number v-model="form.taskRetryTimes" :min="0"
                         style="width: 100%;"></el-input-number>
      </el-form-item>
      <el-form-item label="任务是否多机执行" prop="taskMulti">
        <el-switch v-model="form.taskMulti" :inactive-value="0" :active-value="1"
                   active-text="是" inactive-text="否"></el-switch>
      </el-form-item>
      <el-form-item label="任务状态" prop="taskStatus">
        <el-switch v-model="form.taskStatus" :active-value="1" :inactive-value="99"
                   active-text="启用" inactive-text="禁用"></el-switch>
      </el-form-item>
      <el-form-item label="任务分组">
        <el-input v-model="form.taskGroup" placeholder="请输入任务分组" clearable></el-input>
      </el-form-item>
      <el-form-item label="任务描述">
        <el-input v-model="form.taskRemark" placeholder="请输入任务描述" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible=false">取 消</el-button>
      <el-button v-if="mode!=='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-drawer>
</template>

<script setup>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import SailorCron from "@/components/SailorCron/index.vue";
import Apis from '@/api'

const emit = defineEmits(['success', 'closed'])

let mode = ref("add")
let titleMap = reactive({
  add: '新增任务',
  edit: '编辑任务',
  show: '查看'
})
let visible = ref(false)
let isSaveing = ref(false)
//表单数据
let form = reactive({
  uuid: "0fa1ef05-e63d-4455-8eba-b159d0cdac3a",
  createdAt: "2025-01-01 19:36:37",
  taskName: "测试任务",
  taskGroup: "test",
  taskCron: "0 0/1 * * * ? ",
  taskInvokeTarget: "ExamplesOne",
  taskArgs: "test",
  taskHttpMethod: "",
  taskTimeout: 0,
  taskMulti: 0,
  taskRetryTimes: 0,
  taskRetryInterval: 0,
  taskTag: "internalFuncTask",
  taskRemark: "测试任务",
  taskStatus: 99
})
//验证规则
const rules = reactive({
  taskName: [
    {required: true, message: '请输入任务名称'}
  ],
  taskCron: [
    {required: true, message: '请输入任务cron'}
  ],
  taskInvokeTarget: [
    {required: true, message: '请输入调用目标'}
  ],
  taskTag: [
    {required: true, message: '请选择任务类型', trigger: 'change'}
  ],
  taskHttpMethod: [
    {required: true, message: '请选择HTTP请求方式', trigger: 'change'}
  ],
  taskTimeout: [
    {required: true, message: '请输入超时时间', trigger: 'change'}
  ],
  taskRetryInterval: [
    {required: true, message: '请输入任务重试间隔时间', trigger: 'change'}
  ],
  taskRetryTimes: [
    {required: true, message: '请输入任务重试次数', trigger: 'change'}
  ],
  taskMulti: [
    {required: true, message: '请选择任务是否多机执行', trigger: 'change'}
  ],
  taskStatus: [
    {required: true, message: '请选择任务状态', trigger: 'change'}
  ],
  group: [
    {required: true, message: '请选择所属角色', trigger: 'change'}
  ]
})

let formRef = ref()

//表单提交方法
const submit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      isSaveing.value = true;
      let res = mode.value === 'add' ? await Apis.api_task.create.post(form) : await Apis.api_task.update.post(form);
      isSaveing.value = false;
      if (res.code === 0) {
        if (mode.value === 'add') {
          form.uuid = res.data.uuid
          form.createdAt = res.data.createdAt
        }
        emit('success', form, mode.value)
        visible.value = false;
        ElMessage.success("操作成功")
      } else {
        ElMessage.error(res.message)
      }
    } else {
      return false;
    }
  })
}
//表单注入数据
const setData = (data, m = 'add') => {
  Object.assign(form, data)
  mode.value = m;
  visible.value = true;
}

defineExpose({
  setData
})
</script>

<style>
</style>